<template>
  <div class="edit-container">
    <el-form v-loading="formLoading" ref="form" :model="form" label-width="100px">
      <el-descriptions title="订单信息" direction="vertical" :column="3" border>
        <el-descriptions-item label="奖品名称">{{ form.hitPrize }}</el-descriptions-item>
        <el-descriptions-item label="订单编号">{{ form.orderSn }}</el-descriptions-item>
        <el-descriptions-item label="中奖时间">{{ form.drawTime }}</el-descriptions-item>
        <el-descriptions-item label="收货人" v-if="form.user">{{ form.user.name }}</el-descriptions-item>
        <el-descriptions-item label="联系电话" v-if="form.user">{{ form.user.phone }}</el-descriptions-item>
        <el-descriptions-item label="地区" v-if="form.addressModel">{{ form.addressModel.area }}</el-descriptions-item>
        <el-descriptions-item label="详细地址" v-if="form.addressModel">{{ form.addressModel.address }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="物流信息" direction="vertical" :column="4" border v-if="form.deliveryVo">
        <el-descriptions-item label="快递公司名称">{{ form.deliveryVo.result.expName }}</el-descriptions-item>
        <el-descriptions-item label="快递公司官网">{{ form.deliveryVo.result.expSite }}</el-descriptions-item>
        <el-descriptions-item label="快递公司电话">{{ form.deliveryVo.result.expPhone }}</el-descriptions-item>
        <el-descriptions-item label="快递员或快递站">{{ form.deliveryVo.result.courier }}</el-descriptions-item>
        <el-descriptions-item label="快递员电话">{{ form.deliveryVo.result.courierPhone }}</el-descriptions-item>
        <el-descriptions-item label="快递轨迹信息最新时间">{{form.deliveryVo.result.updateTime }}</el-descriptions-item>
        <el-descriptions-item label="发货到收货消耗时长">{{ form.deliveryVo.result.takeTime }}</el-descriptions-item>
        <el-descriptions-item label="快递状态">
          <template>
            <div v-if="form.deliveryVo.result.deliverystatus==='0'">快递收件(揽件)</div>
            <div v-if="form.deliveryVo.result.deliverystatus==='1'">在途中</div>
            <div v-else-if="form.deliveryVo.result.deliverystatus==='2'">正在派件</div>
            <div v-else-if="form.deliveryVo.result.deliverystatus==='3'">已签收</div>
            <div v-else-if="form.deliveryVo.result.deliverystatus==='4'">派送失败</div>
            <div v-else-if="form.deliveryVo.result.deliverystatus==='5'">疑难件</div>
            <div v-else-if="form.deliveryVo.result.deliverystatus==='6'">退件签收</div>
          </template>
        </el-descriptions-item>
      </el-descriptions>
        <el-descriptions title="物流详情" direction="vertical" :column="2" border v-if="form.deliveryVo">
        <template  v-for="(item, index) in form.deliveryVo.result.list">
          <el-descriptions-item label="时间" :key="index">{{item.time}}</el-descriptions-item>
          <el-descriptions-item label="详细信息" :key="index">{{item.status}}</el-descriptions-item>
        </template>
      </el-descriptions>
    </el-form>
  </div>
</template>
<script>
import {recordDetail} from "@/api/order";
import {getForm} from "@/utils/utils";

export default {
  props: {
    id: {
      default: null
    }
  },
  data() {
    return {
      otherInfoVisible: false,
      form: {
        id: null,
        hitPrize: '',
        orderSn: '',
        phone: '',
        createTime: '',
        drawTime: '',
        status: '',
        user:{
          name:'',
          phone:''
        },
        addressModel: {
          id: null,
          contacts: '',
          phone: '',
          area: '',
          address: '',
          isDefault: '',
          userId: '',
          status: '',
          createTime: ''
        },
        deliveryVo: {
          result: {
            expName: '',
            takeTime: '',
            expSite: '',
            expPhone: '',
            updateTime: '',
            type: '',
            list: [
              {
                time: '',
                status: ''
              }
            ],
            issign: '',
            number: '',
            deliverystatus: '',
            courier: '',
            logo: '',
            courierPhone: ''
          },
        }
      },
        roles: [],
        formLoading: false,
        expressCompanyList: []
    }
  },
  mounted() {
    if (this.id) {
      this.getDetail();
    }
  }
  ,
  methods: {
    handleClick(tab) {
      if (tab.name === 'second') {
        this.otherInfoVisible = true;
      } else {
        this.otherInfoVisible = false;
      }
    },
    getDetail() {
      this.formLoading = true
      recordDetail(this.id).then(res => {
        getForm(res, this.form);
      }).finally(() => {
        this.formLoading = false;
      })
    },
    close() {
      this.$emit('hideEditDialog')
    }
  }
}
</script>
<style lang="scss" scoped>
.col {
  width: 360px;
}

.img {
  width: 120px;
  height: 120px;
  margin-right: 10px;
}

.imgList {
  display: flex;
  flex-wrap: wrap;

  .img {
    width: 120px;
    height: 120px;
    margin-right: 10px;
  }
}
</style>
